<template>
  <div :class="active ? `fic active` : `fic`" :style="`width:${width}`">
    <el-cascader :style="`width:${width}`" :value="mainValue" :options="optionData" @change="handleChange"
      @focus="onFocus" :show-all-levels="false" :filterable="filterable"></el-cascader>
    <i class="el-icon-circle-close" @click="$emit('delete')"></i>
  </div>
</template>

<script>

export default {
  props: {
    label: { type: String, default: "" },
    value: { type: [String, Number], default: () => ([]) },
    width: { type: String, default: "" },
    optionData: { type: Array, default: () => ([]) },
    active: { type: Boolean, default: false },
    filterable: { type: Boolean, default: false },
  },
  data() {
    return {
      mainValue: null
    }
  },
  watch: {
    optionData: {
      handler(newv, oldv) {
        const { value, _getValueArrByV } = this
        const result = _getValueArrByV(value, newv)
        this.mainValue = result
      },
    },
    value: {
      handler(newv, oldv) {
        const { _getValueArrByV } = this
        const result = _getValueArrByV(newv)
        this.mainValue = result
      },
    }
  },
  mounted() {
    this.react()
    console.log(this.filterable)
  },
  methods: {
    react() {
      const { value, _getValueArrByV } = this
      const result = _getValueArrByV(value)
      this.mainValue = result
    },
    handleChange(v) {
      const L = v.length
      const value = v[L - 1]
      this.$emit("change", value)
      this.$emit("choose")
    },
    _getValueArrByV(v, ds) {
      const dataSource = ds || this.optionData
      const result = this._findTarget(dataSource, v)
      return result
    },
    _findTarget(allData, v) {
      let result
      let gotit = false
      let hell = []
      let index = 0
      let _result = []

      for (let i = 0; i < allData.length; i++) {
        if (gotit) {
          break;
        }

        hell = []
        index = 0
        _result = []
        // hell[index] = allData[i]
        lopper([allData[i]])
      }

      function lopper(targetArr) {
        if (gotit) { return }
        targetArr.forEach((target) => {
          if (target.value === v) {
            result = v
            gotit = true
            // 填补之前的值
            hell.forEach((it) => {
              if (it.value !== v) {
                _result.push(it.value)
              }
            })
          } else {
            if (target.children && target.children.length) {
              hell[index] = target
              index++
              lopper(target.children)
            }
          }
        })
      }

      return [..._result, result]
    },
    onFocus() {
      this.$emit("choose")
    }
  }
}
</script>
<style lang="scss" scoped>
.fic {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  cursor: pointer;
  padding: 5px;
  border: solid 1px transparent;

  i {
    cursor: pointer;
    margin-top: 5px;
  }
}

.fic.active {
  border: dashed 1px #1E90FF;
}
</style>
